<script setup lang="ts">
const props = defineProps<{
  src: string
}>()

const emit = defineEmits<{
  play: [playing: boolean] // 具名元组语法
}>()

const videoRef = ref()

const { toggle } = useFullscreen(videoRef)

const { playing, currentTime, duration } = useMediaControls(videoRef, {
  src: props.src,
})

function formatDuration(seconds: number) {
  return new Date(1000 * seconds).toISOString().slice(14, 19)
}

function playVideo() {
  playing.value = !playing.value
  emit('play', playing.value)
}
</script>

<template>
  <div class="bg-#181818 text-12px">
    <video ref="videoRef" src="/video/1.mp4" poster="/video/1.4-poster.png" class="m-auto" />
    <div class="pt-6em pb-1em p-x-1em ">
      <div class="grid grid-cols-3">
        <div>{{ formatDuration(currentTime) }} / {{ formatDuration(duration) }}</div>
        <div id="playBtn" class="place-self-center p-x-0.5em" @click="playVideo">
          <png-icon :icon="playing ? 'pause' : 'play'" />
        </div>
        <div class="flex justify-end gap-1em">
          <png-icon icon="undo" />
          <png-icon icon="redo" />
          <png-icon icon="fullScreen" @click="toggle" />
        </div>
      </div>
    </div>
  </div>
</template>
